<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单下拉菜单测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #1a253d;
            color: white;
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-button {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(0, 245, 255, 0.3);
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .dropdown-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 5px;
            background: #2a2a2a;
            border: 1px solid #555;
            border-radius: 8px;
            min-width: 150px;
            z-index: 1000;
            display: none;
        }
        .dropdown-menu.show {
            display: block;
        }
        .dropdown-item {
            padding: 12px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
        }
        .dropdown-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        .dropdown-item.active {
            background: rgba(0, 245, 255, 0.2);
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            display: none;
        }
        .overlay.show {
            display: block;
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            background: rgba(0, 245, 255, 0.1);
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>🌐 简单下拉菜单测试</h1>
    
    <div class="dropdown">
        <button class="dropdown-button" onclick="toggleDropdown()">
            <span id="currentFlag">🇨🇳</span>
            <span id="currentName">中文</span>
            <span>▼</span>
        </button>
        
        <div id="dropdownMenu" class="dropdown-menu">
            <div class="dropdown-item active" onclick="selectLanguage('zh', '🇨🇳', '中文')">
                <span>🇨🇳</span>
                <span>中文</span>
            </div>
            <div class="dropdown-item" onclick="selectLanguage('en', '🇺🇸', 'English')">
                <span>🇺🇸</span>
                <span>English</span>
            </div>
            <div class="dropdown-item" onclick="selectLanguage('pt', '🇵🇹', 'Português')">
                <span>🇵🇹</span>
                <span>Português</span>
            </div>
        </div>
    </div>
    
    <div id="overlay" class="overlay" onclick="closeDropdown()"></div>
    
    <div class="status">
        <div>当前选择: <span id="currentSelection">中文 (zh)</span></div>
        <div>点击次数: <span id="clickCount">0</span></div>
        <div>最后操作: <span id="lastAction">无</span></div>
    </div>

    <script>
        let isOpen = false;
        let currentLang = 'zh';
        let clickCount = 0;

        function updateStatus(action) {
            clickCount++;
            document.getElementById('clickCount').textContent = clickCount;
            document.getElementById('lastAction').textContent = action;
            console.log(`操作: ${action}, 点击次数: ${clickCount}`);
        }

        function toggleDropdown() {
            updateStatus('toggleDropdown');
            
            const menu = document.getElementById('dropdownMenu');
            const overlay = document.getElementById('overlay');
            
            isOpen = !isOpen;
            
            if (isOpen) {
                menu.classList.add('show');
                overlay.classList.add('show');
                console.log('下拉菜单已打开');
            } else {
                menu.classList.remove('show');
                overlay.classList.remove('show');
                console.log('下拉菜单已关闭');
            }
        }

        function closeDropdown() {
            updateStatus('closeDropdown');
            
            const menu = document.getElementById('dropdownMenu');
            const overlay = document.getElementById('overlay');
            
            isOpen = false;
            menu.classList.remove('show');
            overlay.classList.remove('show');
            console.log('下拉菜单已关闭（点击外部）');
        }

        function selectLanguage(code, flag, name) {
            updateStatus(`selectLanguage(${code})`);
            
            console.log(`选择语言: ${code} - ${name}`);
            
            // 更新显示
            document.getElementById('currentFlag').textContent = flag;
            document.getElementById('currentName').textContent = name;
            document.getElementById('currentSelection').textContent = `${name} (${code})`;
            
            // 更新活动状态
            document.querySelectorAll('.dropdown-item').forEach(item => {
                item.classList.remove('active');
            });
            event.target.closest('.dropdown-item').classList.add('active');
            
            // 关闭菜单
            closeDropdown();
            
            currentLang = code;
        }

        // 阻止事件冒泡
        document.getElementById('dropdownMenu').addEventListener('click', function(e) {
            e.stopPropagation();
        });

        // 页面加载完成
        window.onload = function() {
            console.log('页面加载完成');
            updateStatus('页面加载');
        };
    </script>
</body>
</html> 